<template>
   <div class="SpaceBanner3-component">
        <div class="swiper-container SpaceBanner3">
            <div class="swiper-wrapper">
                <div class="swiper-slide " :key=" index" v-for="(sb,index) in spaceBanner">
                         <a >
                                <img :src="sb.more"  @click="go(sb)">
                               <span class="title">
                                   {{sb.name}}
                               </span>
                         </a> 

                    </div>
            </div>
            <div class="swiper-button-prev "></div>
            <div class="swiper-button-next "></div>
        </div>
       
    </div>
   </div>
</template>

<script>
import Swiper from '../../static/js/swiper-3.4.2.min'
import $ from '../../static/js/jquery.min'
export default {
    props:{
        spaceBanner:Array,
    },
	components:{
		
	},
    methods:{
        // go(sb){
        //     this.$router.push({
        //         path:'/spaceDetails',
        //         query:{
        //             id:sb.post_id

        //         }
        //     })
        // },
        go(sb){
             this.$router.replace('/back?id='+sb.post_id)
        },
    },
    data(){
        return{

        }
    },
    mounted(){
        var SpaceBanner3 = new Swiper('.SpaceBanner3', {
            prevButton:'.swiper-button-prev',
            nextButton:'.swiper-button-next',
            slidesPerView : 3,
            // centeredSlides : true,
             // spaceBetween: 0,
            // autoplay: 3000,
            speed:1000,
            mousewheelControl : false,
            // effect: 'flip',
        // grabCursor: true,
        });

   
    
    },
}
</script>

<style lang="scss">
    @import "../style/base/_base";
    @import "../../static/css/swiper-3.4.2.min.css";
    .SpaceBanner3-component{
        .swiper-container{
            .swiper-button-prev{
                background-image:url('../../static/images/left_btn.png');
                opacity: 0.6;
                background-size: cover;
               
                transform:rotate(180deg);
                -ms-transform:rotate(180deg);     /* IE 9 */
                -moz-transform:rotate(180deg);    /* Firefox */
                -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
                -o-transform:rotate(180deg);  /* Opera */
            }
            .swiper-button-next{
                background-image:url('../../static/images/left_btn.png');
                opacity: 0.6;
                background-size: cover;
                
            }
            .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
                opacity: .35;
                cursor: auto;
                pointer-events: none;

            }
            .swiper-wrapper{
                @include flex;
            }
            .swiper-slide{
               
                a{ 
                    @include allCenter;
                    flex-flow: column wrap;
                    cursor:pointer;
                    text-align: center;
                    .title{
                        padding-top: 20px;
                    }
                }
            }
            img{
                width: 270px;
                height: 200px;
                // height: auto;
                // margin:0 auto;
            }
            
        }
    }
</style>